<template>
  <t-dialog
    v-model:visible="visible"
    :header="dialogTitle"
    width="900"
    :confirm-btn="{ loading }"
    @confirm="dialogConfirm"
    @close="dialogHide"
  >
    <t-form ref="form" reset-type="initial" :data="formData" :rules="FORM_RULES" :label-width="130">
      <t-row :gutter="[15, 24]">
        <t-col :span="6">
          <t-form-item :label="t('pages.menu.prevLevel')" name="parent">
            <t-cascader
              v-model="formData.parent"
              filterable
              clearable
              check-strictly
              :options="menus"
              :keys="{ label: 'name', value: 'id' }"
            >
            </t-cascader>
          </t-form-item>
        </t-col>
        <t-col :span="6">
          <t-form-item :label="t('pages.menu.type')" name="type">
            <t-radio-group v-model="formData.type" :options="menuType" />
          </t-form-item>
        </t-col>

        <template v-if="formData.type == 0">
          <t-col :span="12">
            <t-divider align="left" style="margin: 0">{{ t('pages.menu.dirinfo') }}</t-divider>
          </t-col>
          <t-col :span="6">
            <t-form-item :label="t('pages.menu.name')" name="name">
              <t-input v-model="formData.name" maxlength="30" show-limit-number />
            </t-form-item>
          </t-col>
          <t-col :span="6">
            <t-form-item :label="t('pages.menu.icon')" name="icon">
              <t-select v-model="formData.icon" :popup-props="{ overlayInnerStyle: { width: '400px' } }">
                <t-option
                  v-for="item in options"
                  :key="item.stem"
                  :value="item.stem"
                  style="display: inline-block; font-size: 16px"
                >
                  <div>
                    <t-icon :name="item.stem" />
                  </div>
                </t-option>
                <template #valueDisplay
                  ><t-icon :name="formData.icon" :style="{ marginRight: '8px' }" />{{ formData.icon }}</template
                >
              </t-select>
            </t-form-item>
          </t-col>
          <t-col :span="6">
            <t-form-item :label="t('pages.menu.router')" name="componentRoute">
              <t-input v-model="formData.componentRoute" maxlength="50" show-limit-number />
            </t-form-item>
          </t-col>
          <t-col :span="6">
            <t-form-item :label="t('pages.menu.mark')" name="mark">
              <t-input v-model="formData.mark" maxlength="30" show-limit-number />
            </t-form-item>
          </t-col>
        </template>

        <template v-if="formData.type == 1">
          <t-col :span="12">
            <t-divider align="left" style="margin: 0">{{ t('pages.menu.menuinfo') }}</t-divider>
          </t-col>
          <t-col :span="6">
            <t-form-item :label="t('pages.menu.name')" name="name">
              <t-input v-model="formData.name" maxlength="30" show-limit-number />
            </t-form-item>
          </t-col>
          <t-col :span="6">
            <t-form-item :label="t('pages.menu.icon')" name="icon">
              <t-select v-model="formData.icon" :popup-props="{ overlayInnerStyle: { width: '400px' } }">
                <t-option
                  v-for="item in options"
                  :key="item.stem"
                  :value="item.stem"
                  style="display: inline-block; font-size: 16px"
                >
                  <div>
                    <t-icon :name="item.stem" />
                  </div>
                </t-option>
                <template #valueDisplay
                  ><t-icon :name="formData.icon" :style="{ marginRight: '8px' }" />{{ formData.icon }}</template
                >
              </t-select>
            </t-form-item>
          </t-col>
          <t-col :span="6">
            <t-form-item :label="t('pages.menu.router')" name="componentRoute">
              <t-input v-model="formData.componentRoute" maxlength="50" show-limit-number />
            </t-form-item>
          </t-col>
          <t-col :span="6">
            <t-form-item :label="t('pages.menu.componentName')" name="componentName">
              <t-input v-model="formData.componentName" maxlength="30" show-limit-number />
            </t-form-item>
          </t-col>
          <t-col :span="6">
            <t-form-item :label="t('pages.menu.componentPath')" name="componentPath">
              <t-input v-model="formData.componentPath" maxlength="50" show-limit-number />
            </t-form-item>
          </t-col>
          <t-col :span="6">
            <t-form-item :label="t('pages.menu.mark')" name="mark">
              <t-input v-model="formData.mark" maxlength="30" show-limit-number />
            </t-form-item>
          </t-col>
        </template>

        <template v-if="formData.type == 2">
          <t-col :span="12">
            <t-divider align="left" style="margin: 0">{{ t('pages.menu.btninfo') }}</t-divider>
          </t-col>
          <t-col :span="6">
            <t-form-item :label="t('pages.menu.btntext')" name="name">
              <t-input v-model="formData.name" maxlength="30" show-limit-number />
            </t-form-item>
          </t-col>
          <t-col :span="6">
            <t-form-item :label="t('pages.menu.mark')" name="mark">
              <t-input v-model="formData.mark" maxlength="30" show-limit-number />
            </t-form-item>
          </t-col>
        </template>

        <template v-if="formData.type < 2">
          <t-col :span="12">
            <t-divider align="left" style="margin: 0">{{ t('pages.menu.lang') }}</t-divider>
          </t-col>
          <t-col :span="6">
            <t-form-item :label="t('langs.zh_TW')" name="langs.zh_TW">
              <t-input v-model="formData.langs.zh_TW" maxlength="30" show-limit-number />
            </t-form-item>
          </t-col>
          <t-col :span="6">
            <t-form-item :label="t('langs.en_US')" name="langs.en_US">
              <t-input v-model="formData.langs.en_US" maxlength="30" show-limit-number />
            </t-form-item>
          </t-col>
          <t-col :span="6">
            <t-form-item :label="t('langs.ko_KR')" name="langs.ko_KR">
              <t-input v-model="formData.langs.ko_KR" maxlength="30" show-limit-number />
            </t-form-item>
          </t-col>
        </template>
      </t-row>
    </t-form>
  </t-dialog>
</template>
<script setup lang="ts">
import { manifest } from 'tdesign-icons-vue-next';
import { ref } from 'vue';

import { t } from '@/locales';

import { FORM_DATA, FORM_RULES } from '../constants';

defineProps({
  menus: {
    type: Array,
    default: () => [],
  },
});

const menuType = ref([
  { label: t('pages.menu.dir'), value: 0 },
  { label: t('pages.menu.manu'), value: 1 },
  { label: t('pages.menu.btn'), value: 2 },
]);
const options = ref(manifest);

const loading = ref(false);
const emits = defineEmits(['confirm']);

const dialogTitle = ref('');
const type = ref('add');
const visible = ref(false);
const form = ref(null);
const formData = ref({ ...FORM_DATA });

const dialogShow = (action: string, row: Recordable) => {
  visible.value = true;
  type.value = action;
  formData.value = FORM_DATA;
  form.value.reset();
  if (action === 'edit') {
    formData.value = JSON.parse(JSON.stringify(row));
    if (row.parent) {
      formData.value.parent = row.parent.id;
    } else {
      formData.value.parent = 0;
    }
    if (row.langs) {
      formData.value.langs = JSON.parse(row.langs);
    } else {
      formData.value.langs = {
        zh_TW: '',
        en_US: '',
        ko_KR: '',
      };
    }
    dialogTitle.value = `${t('common.edit')}【${row.name}】`;
  } else if (action === 'addchild') {
    formData.value.parent = row.id;
    formData.value.type = row.type + 1;
    dialogTitle.value = t('common.add');
  } else {
    dialogTitle.value = t('common.add');
  }
};
const dialogHide = () => {
  loading.value = false;
  form.value.reset();
  visible.value = false;
};
const dialogConfirm = async () => {
  const valid = await form.value.validate();
  if (valid !== true) {
    return;
  }
  loading.value = true;
  const res = JSON.parse(JSON.stringify(formData.value));

  if (res.type === 0) {
    if (res.parent === 0) {
      res.componentRoute = res.componentRoute.charAt(0) === '/' ? res.componentRoute : `/${res.componentRoute}`;
    }
  } else if (res.type === 1) {
    res.componentRoute = res.componentRoute.replace('/', '');
  }

  res.langs = JSON.stringify(res.langs);

  emits('confirm', type.value, res);
};

defineExpose({
  dialogShow,
  dialogHide,
});
</script>
